Jak stworzyć aplikację mobilną dla Android lub iOS w HTML i Javascript?

Dla wielu twórców stron internetowych, którzy znają HTML, CSS i JavaScript, stworzenie aplikacji mobilnej może wydawać się trudne i wymagające nauki nowych języków programowania. Technicznie rzecz biorąc, aplikacje na Androida czy iOS tworzone są przy użyciu języka Java (Android) czy Objective-C lub Swift (iOS). Jest jednak również inna droga. Teraz każdy, kto posiada wiedzę na temat HTML, CSS i JavaScript, może stworzyć aplikację mobilną w Pająku dla Androida, iOS czy nawet Windows i macOS.

Tworzymy aplikacje mobilne na Android i iOS w Pająku

Jedną z ważniejszych zalet korzystania ze znanych już technologii HTML, CSS i JavaScript do tworzenia aplikacji mobilnych jest przenośność. Dzięki temu możliwe jest przeniesienie kodu swojej aplikacji na wiele różnych platform. Aplikacje w HTML wymagają jednak kilku dodatkowych narzędzi, aby można było uruchomić je na urządzeniach przenośnych czy nawet ostatecznie umieścić w sklepie Google Play czy Apple Appstore. Przykładowo wszystkie moje aplikacje mobilne (oprócz gry) zostały stworzone w Pająku i mają obecnie na różnych platformach w sumie ponad milion pobrań i instalacji. Czemu i Ty nie miał(a)byś również spróbować i z wykorzystaniem swojej wiedzy i znanego Ci narzędzia (Pająka 🙂 napisać aplikację, która może podbije świat komórek czy tabletów?

Kreator aplikacji mobilnych w HTML, Javascript i CSS

Pająk posiada narzędzie kreatora aplikacji mobilnej, dzięki któremu można utworzyć i uruchomić na podłączonym urządzeniu (np. telefonie) lub zainstalowanym symulatorze aplikację, a dokładnie szablon aplikacji, który wypełnisz przez siebie treścią. Narzędzie to pozwala utworzyć aplikację w oparciu o trzy różne platformy służące do „pakowania” kodu HTML, CSS, JavaScript do postaci pakietu aplikacji, który można zainstalować na telefonie lub wysłać do sklepu z aplikacjami. Są to: Cordova, ReactNative oraz Electron. Ten ostatni służy do tworzenia programów desktopowych, np. dla Windows czy macOS. W tym artykule przedstawię kroki potrzebne do stworzenia aplikacji na Android w oparciu o pakiet Cordova. Dlaczego Cordova? Po pierwsze znam go najlepiej, a po drugie nie wymaga żadnej specjalnej wiedzy w odróżnieniu od ReactNative, który posiada jednak pewną barierę wejścia.

Możesz obejrzeć również film na Youtube, który jest ilustracją do tego artykułu. Film znajduje się na początku artykułu.

Przygotowanie środowiska

Zanim jednak uruchomimy kreatora aplikacji mobilnej w Pająku, trzeba przygotować środowisko pracy, a więc zainstalować wszystkie pakiety, które są niezbędne do uruchomienia Cordova oraz kompilacji aplikacji dla urządzeń Android. Nie będę zajmować się iOS, gdyż do kompilacji i testowania aplikacji iOS potrzebne jest urządzenie z macOS (czyli np. MacBook). Nic nie stoi jednak na przeszkodzie, aby na Windows tworzyć w Pająku aplikacje, a kompilować je na odrębnym urządzeniu z macOS. Sam tak robię 🙂

Zakładam również, że nie posiadasz jeszcze zainstalowanego Android SDK oraz Node.js, więc jeśli jest inaczej, możesz przejść dalej. Tutaj omówię wszystko od podstaw.

Instalacja Node.js

Dawniej, jeszcze w czasach przed Node.js, programiści mogli uruchamiać swój kod JavaScript wyłącznie w środowisku przeglądarki. Dzięki Node.js, które jest środowiskiem uruchomieniowym do wykonywania kodu JavaScript, można pisać i uruchamiać programy niezależnie od przeglądarki. Node.js oraz dołączony do niego npm (manager pakietów dla Node.js) są wymagane do instalacji Cordova, jak również późniejszego korzystania z tego pakietu. Do instalacji Node.js na Windows, wystarczy pobrać instalator Node.js w wersji LTS, a następnie go zainstalować. Po zakończeniu powinieneś móc uruchamiać polecenia node oraz npm w terminalu. Pająk posiada własny terminal na dolnym panelu, ale możesz również użyć dowolnego terminala jak np. cmd.exe. Po instalacji wpisz w terminalu komendę npm -v oraz npm -v, co po poprawnej instalacji Node.js wyświetli numery wersji node oraz npm.

Instalacja Cordova

Pakiet Cordova możemy zainstalować ręcznie lub pozostawić do zadanie Pająkowi. Kreator aplikacji mobilnej (zdjęcie na początku) potrafi wykryć czy pakiet Cordova jest zainstalowany, a jeśli nie, przeprowadzić jego instalację. Ręczna instalacja odbywa się natomiast za pomocą Node.js. W oknie terminala, gdzie wprowadzamy komendę npm install -g cordova, co spowoduje zainstalowanie pakietu Cordova globalnie, czyli będzie mógł być używany z dowolnego folderu w naszym systemie operacyjnym. Instalacja Cordova trwa kilka do kilkunastu minut. Na powyższym zdjęciu terminala Pająka widać komendę instalacyjną oraz w górnej części sprawdzenie wersji node i npm.

Instalacja JDK oraz Android SDK

Posiadając Node.js i Cordova potrzebujemy jeszcze kompilatora Java oraz narzędzi do budowania pakietów dla Androida, a także do podłączania urządzeń i testowania aplikacji bezpośrednio na urządzeniach. W tym celu należy zainstalować:

• Java Development Kit (JDK) 8
• Android Studio

Wszystkie pakiety w ramach Android SDK Tools instalowanych razem z Android Studio powinny być aktualne. O aktualizację można zadbać korzystając z SDK Managera, który wchodzi w skład pakietu Android Studio.

Na Windows Cordova wymaga jeszcze ustawienia ścieżek systemowych, aby podczas pracy z różnych folderów, możliwe było odnalezienie wymaganych narzędzi:

• Zmienna środowiskowa JAVA_HOME powinna być ustawiona na ścieżkę gdzie zainstalowane jest JDK
• Zmienna środowiskowa ANDROID_SDK_ROOT powinna być ustawiona na lokalizację Android SDK
• Zaleca się również, aby dodać ścieżki do katalogów cmdline-tools/latest/bin, emulator i platform-tools znajdujących się w Android SDK do zmiennej PATH
• Aby korzystać z pakietów apksigner oraz zipalign (wymagane podczas tworzenia pakietów dla sklepu Google Play, konieczne jest jeszcze dodanie ścieżki do katalogu build-tools do zmiennej PATH

Aby łatwo ustawić te zmienne w Windows otwórz menu Start i rozpocznij wyszukiwanie pisząc: zmienne. W wyszukiwarce pojawi się polecenie „Edytuj zmienne środowiskowe systemu” oraz „Edytuj zmienne środowiskowe dla konta”. Wybieramy to drugie. W oknie „Zmienne środowiskowe” definiujemy powyżej wskazane zmienne tak, aby w kolumnie Zmienna znajdowała się nazwa zmiennej, a w kolumnie Wartość ścieżka dostępu do katalogu. Szczególnym przypadkiem jest zmienna PATH. Edytując ją dodaj ścieżki do podanych powyżej katalogów, aby znalazły się na liście.

Tworzenie aplikacji

Uff… trochę trzeba było poświęcić czasu na instalację tych wszystkich wymaganych pakietów, ale w końcu można przejść do przyjemnego, a więc utworzenia swojej pierwszej aplikacji. W tym celu wykorzystamy narzędzie wbudowane w Pająka. Można je uruchomić za pomocą polecenia z menu Plik / Nowy ... / Nowa aplikacja mobilna/desktop. Okno, które się wyświetli pozwala na wybór platformy. Pozostawimy domyślną platformę Cordova i klikniemy Dalej. Program sprawdzi teraz poprawność zainstalowania wymaganych pakietów, następnie zapyta o nazwę dla tworzonego projektu i katalog, w którym znajdować się będą pliki aplikacji.

W kolejnym kroku Pająk rozpocznie tworzenie aplikacji i instalację platform docelowych. Platformy docelowe, to dodatkowe pliki, które pozwalają na kompilację aplikacji dla wybranego urządzenia docelowego. W przypadku Cordova możliwe jest tworzenie aplikacji dla Androida, iOS, Windows, dla komputerów (Electron), a także działającej w przeglądarce. Niestety na Windows nie jest możliwe bezpośrednie tworzenie aplikacji iOS, dlatego ta opcja nie jest dostępna w oknie wyboru platformy. W tym artykule tworzymy aplikację dla urządzeń Android, więc zaznaczymy tę właśnie opcję.

Proces instalowania plików aplikacji może potrwać chwilę, a postęp widoczny jest w oknie terminala w Pająku. Po zakończeniu tego procesu aplikacja będzie gotowa do przetestowania na urządzeniu lub symulatorze. W tym celu należy podłączyć urządzenie do komputera za pomocą przewodu USB lub bezprzewodowo, co pozwoli na instalację skompilowanego pakietu bezpośrednio na urządzeniu. Jednakże, aby było to w ogóle możliwe, urządzenie musi być odpowiednio skonfigurowane w trybie programisty. Najlepiej sprawdzić w sieci, jak włączyć tryb programisty na posiadanym, konkretnym modelu urządzenia. Po włączeniu trybu programisty pojawia się dodatkowa opcja w ustawieniach, czyli „Opcje programistyczne”, gdzie włączamy „Debugowanie USB” i „Instaluj przez USB”, ewentualnie konfigurujemy debugowanie bezprzewodowe. Dodatkowe informacje na ten temat znaleźć można np. w dokumentacji Androida. Jeśli wszystkie dotychczasowe kroki przebiegły poprawnie i wszystko jest już zainstalowane, a telefon podłączony, wywołanie komendy adb devices w terminalu powinno pokazać listę podłączonych do komputera urządzeń.

Uruchamianie aplikacji

Mając poprawnie skonfigurowany system, wygenerowaną przykładową aplikację oraz podłączone urządzenie, możemy zainstalować ją, uruchomić i cieszyć się pierwszą stworzoną apką. W przypadku korzystania z kreatora, tworzy on nowy projekt we wskazanym wcześniej folderze pod nazwą aplikacji. Dodatkowo projekt taki oznaczany jest jako typ „aplikacja” i dla takiego projektu w menu głównym Projekty oraz w menu podręcznym właściwości projektu pojawia się dodatkowe podmenu Aplikacja z poleceniami pozwalającymi na uruchomienie aplikacji, jej kompilację, a także korzystanie z pluginów. Pluginy to dodatkowa funkcjonalność Cordova, która pozwala na wykorzystanie możliwości sprzętowych urządzeń, np. geolokalizacji, wyświetlania powiadomień, robienia zdjęć, itd. Więcej szczegółów na temat korzystania z pluginów można znaleźć w dokumentacji Cordova.

Podczas korzystania z kreatora, proponuje on kompilację i uruchomienie aplikacji. Możemy to również wykonać samodzielnie z menu Projekty / Aplikacja / Uruchom aplikację lub z linii komend terminala za pomocą polecenia cordova run android, co spowoduje uruchomienie procesu kompilacji projektu, tworzenia pakietu i instalacji go na urządzeniu. Na koniec można cieszyć się swoją pierwszą aplikacją działającą np. na telefonie lub tablecie i przystąpić do jej rozwijania w dobrze znanym już sobie HTML, CSS i JavaScript, albo po prostu przejść kroki kreatora jeszcze raz, gdy wszystko jest już poprawnie skonfigurowane i proces utworzenia aplikacji ogranicza się do kilku kliknięć myszką. Niestety wcześniej konieczne jest wykonanie tych wszystkich kroków, ale za to później można skupić się już na nieskrępowanej twórczej pracy 🙂 Na koniec zdjęcie aplikacji wygenerowanej w Pająku na urządzeniu Android.